<template>
  <!-- 创建发货单 -->
  <el-dialog
    v-model="dialogVisible"
    title="发货单详情"
    width="50%"
    :before-close="handleClose"
  >
    <el-form v-loading="loading" :model="ruleForm" status-icon>
      <el-alert
        v-if="ruleForm.deliveryList && 
        ruleForm.deliveryList.status === 0"
        class="mb-30"
        title="平台审核中，请耐心等待。"
        type="warning"
        show-icon
      />
      <el-row :gutter="24" v-if="ruleForm.deliveryList">
        <el-col :span="12" >
          <el-form-item label="发货订单：">
            <span>{{ ruleForm.deliveryList.orderId }}</span>
          </el-form-item>
        </el-col>
         <el-col :span="12" >
          <el-form-item label="出口申请号：">
            <span>{{ ruleForm.deliveryList.carOutApplyId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发货车辆信息：">
            <span>{{ ruleForm.deliveryList.productInfo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成交方式：">
            <span>{{ ruleForm.orderList.tradeMode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启运港：">
            <span>{{ ruleForm.deliveryList.startHarborName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发货车辆：">
            <el-tag
              class="mr-sm mb-sm"
              v-for="(item, index) in ruleForm.carList"
              :key="index"
              >{{ item.vin }}</el-tag
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance, initCustomFormatter } from "vue";
import { ElMessage } from "element-plus";
import { deepClone } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const loading = ref(false);
const ruleForm = ref({});
const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    const url = "/sellerDeliveryList/getById";
    const res = await proxy.$get({ url, params: { id: item.id } });
    ruleForm.value = res;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
.table-footer {
  background: rgb(241, 241, 241);
  color: rgb(32, 32, 32);
  font-size: 14px;
  font-weight: 500;
  border-bottom: var(--el-table-border);
  padding: 12px 16px;
}
</style>
